<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart);
    // 2.设置配置项
    let option = {
      xAxis: {},
      yAxis: {

      },
      tooltip: {},//提示框组件
      series: [
        {
          symbolSize: 20,
          data: [
            [9.0, 7.04],
            [18.07, 4.33],
            [3.0, 9.65],
            [9.05, 8.23],
            [18.0, 9.76],
            [15.0, 7.56],
            [23.4, 5.31],
            [10.1, 7.47],
            [16.0, 8.26],
            [12.7, 3.53],
            [9.35, 7.2],
            [7.4, 8.2],
            [3.07, 4.82],
            [18.2, 6.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [17.0, 6.55],
            [12.0, 8.84],
            [8.18, 5.82],
            [6.32, 5.68],
          ],
          type: "scatter", //散点图
          // 圆形样式
          color: {//线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "#00CCFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255, 173, 119, 1)", // 100% 处的颜色
              },
            ],
            globalCoord: true, // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          },
          emphasis: {//高亮的图形和标签样式
            itemStyle: {
              borderColor: "rgba(102,205,46,0.30)",
              borderWidth: 30,
            },
          },

        },
      ],
    };
    // 3.设置图表绘制图表
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>